<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"/>
	<title>3_props简写形式</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root1"></div>
<div id="root2"></div>
<div id="root3"></div>

<!-- 引入react核心库 -->
<script src="../js/react.development.js" type="text/javascript"></script>
<!-- 引入react-dom 用于支持react操作dom -->
<script
		src="../js/react-dom.development.js"
		type="text/javascript"
></script>
<!-- 引入babel 将js转换成jsx -->
<script src="../js/babel.min.js" type="text/javascript"></script>
<!--引入props-types.js 增加类型判断-->
<script src="../js/prop-types.js" type="text/javascript"></script>

<!-- type="text/babel" 表示写的是 jsx 使用babel 翻译 -->
<script type="text/babel">
	// 1. 创建类式组件
	class Person extends React.Component {
		/*
		*   在React组件挂载之前，会调用它的构造函数。在为React..Component子类实现构造函数时，
		*	应在其他语句之前前调用super(props)。否则，this.props在构造函数中可能会出现未定义
		*	的bug。
		* */
		constructor(props) {
			// 构造器是否接收props,是否传递给super,取决于：是否希望在构造器中通过this访问props
			super(props);
		}
		// 初始化状态
		render() {
			// this.props.userName = ''  错误 props 只能读 不可以修改 会报错
			return (
					<ul>
						<li>姓名：{this.props.userName}</li>
						<li>性别：{this.props.sex}</li>
						<li>年龄：{this.props.age}</li>
						<li>年龄：{this.props.speak&&this.props.speak()}</li>
					</ul>
			);
		}
		// 对标签属性进行类型、必要性的限制
		static propTypes = {
			userName:PropTypes.string.isRequired, // 限制userName必传 且为字符串
			sex:PropTypes.string, // sex 为字符串
			age:PropTypes.number, // 限制age为数值
			speak:PropTypes.func// 限制speak为函数
		}
		// 设置默认值
		static defaultProps = {
			sex:'未知',
			age:18
		}
	}
	function speak(){
		console.log(this,'hello,world')
	}
	
	const person = {userName: "阿张", sex: "男", age: 18}
	// 2. 渲染元素到页面
	ReactDOM.render(<Person userName="男" age={18} speak={speak} />, document.getElementById("root1"));
	ReactDOM.render(<Person {...person} />, document.getElementById("root2"));
	ReactDOM.render(<Person {...person} />, document.getElementById("root3"));
	


</script>
</body>
</html>
